<template>
  <div class="coming">
    <ul>
		<li v-for="item in coming" :key="item.id">
			<div class="img-wraper"><img :src="item.img"></div>
			<div class="desc-wraper">
				<p class="name">{{item.name}}</p>
				<P class="people">{{item.people}}想看</P>
				<p class="desc-color actors">主演： {{item.actors}}</p>
				<p class="desc-color">未来30天内上映</p>
			</div>
			<div class="button-wraper">
				<button>预售</button>
			</div>
		</li>
	</ul>
  </div>
</template>

<script>
	export default{
		name:'Coming',
		data(){
			return{
				coming:[]
			}
		},
		created(){
				this.getPlayData();
			},
		methods:{
					getPlayData(){
						// 为给定 ID 的 user 创建请求
						// var that=this;
						axios.get('/mock/coming.json')
						  .then(response => {
						    console.log(response);
							if(response.status==200){
								if(response.data && response.data.coming){
									this.coming=response.data.coming;
									console.log(this.coming)
								}
							}
						  })
						  .catch(function (error) {
						    console.log(error);
						  });
					}
				}
			}
			
		</script>
	}
	
</script>

<style scoped>
	.coming{
		background:white;
		height: 100%;
	}
	.button-wraper{
		float: right;
		line-height:80px;
	}
	img{
		width: 70px;
	}
	.img-wraper{
		width: 23%;
		margin-bottom: 10px;
		float: left;
	}
	.desc-wraper{
		width: 60%;
		float: left;
	}
	li{
		margin: 15px;
		overflow:hidden;
		border-bottom: 1px solid #0b0b0b;
		z-index: 1;
	}
	.desc-color{
		color: white;
		font-size: 14px;
	}
	.name{
		font-size: 18px;
		font-weight:bold;
		color: black;
	}
	.people{
		color: black;
	}
	.actors{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
		color: black;
	}
	p{
		line-height:25px;
		margin: 0;
	}
	button{
		width:50px ;
		height:30px ;
		border-radius:5px ;
		color:white;
		background-color:#d6dae6 ;
		font-weight: bold;
		border: none;
		
	}
</style>

